/*
  学习目标：jsx的注意点
  1. jsx 必须有且只有一个 根节点，与 vue2（template） 类似
     在 react 中可以使用👍 <></> (或者❌<React.Fragment></React.Fragment>)
  2. 标签必须闭合
  3. 关键字的冲突， class ---> className, for  ---->  htmlFor
  4. 如果有多行代码，建议用 () 包起来,防止代码结尾自动加 ; 的bug
*/
import React from "react";
import ReactDOM from "react-dom";

// 使用 jsx 创建元素
const ulNode = (
  // 只能有一个根标签
  <>
    {/* react 中，标签必须闭合，建议直接用单标签闭合 <input /> */}
    <input id="input" />
    {/* 关键字的冲突， class ---> className, for  ---->  htmlFor */}
    <label htmlFor="input">点我聚焦input</label>
    <ul className="list">
      <li>香蕉</li>
      <li>苹果</li>
      <li>雪梨</li>
    </ul>
    <ul className="list">
      <li>香蕉</li>
      <li>苹果</li>
      <li>雪梨</li>
    </ul>
  </>
);
ReactDOM.render(ulNode, document.getElementById("root"));
